<template>
  <transition  name="fade">
    <div class="product-list" v-if="ProductListVisible" @mouseover="showProductList" @mouseleave="hideProductList">
      <div class="product-list-item">
        <ul>
          <li v-for="(itme,index) in titleData"
           :key="index"
           >
            <a href="#"><img :src="itme.src"
               alt=""
               v-on:mouseover="zoomIn"
               v-on:mouseleave="zoomOut"
                   >
              </a>
            <div class="product-list-item-title">
              <a href="#">{{ itme.title }}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
</transition>
</template>

<script>
import { ref, toRefs,reactive,onMounted } from 'vue';
import axios from 'axios'
import {useModelWrapper} from './use-model-wrapper.js'

  export default {
    name: "ProductList",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      editData: {
        type: Object,
      },
    },

    setup(props, {emit}){
      const ProductListVisible = useModelWrapper(props, emit, 'visible')
      const {editData,visible} = toRefs(props)
      const data = reactive({
        titleData: [],
        timeoutId: null,
        isshow: ref(visible.value)
      })


      const getProduct = async () =>{
        const response = await axios.get(
          '/api/getProduct/',
          {
            headers: {
              "Content-Type": "application/json;charset=utf-8",
              'X-Requested-With': 'XMLHttpRequest',
              'Access-Control-Allow-Origin': '*'
            }
          }
        )
        data.titleData = response.data.title
      }


      const showProductList = () => {
        ProductListVisible.value = true;
        emit('closeTime', ProductListVisible.value )
      }

      const hideProductList = () => {
        ProductListVisible.value = false;
      };

      const zoomIn =(event) => {
        event.target.style.transform = 'translateY(10px)';
      }

      const zoomOut = (event) => {
        event.target.style.transform = 'translateY(0)';
      }




      onMounted(() => {
        getProduct()
      })



      return{
        ...toRefs(data),
        ProductListVisible,
        editData,
        getProduct,
        showProductList,
        hideProductList,
        zoomIn,
        zoomOut

      }
    }
  }
</script>



<style scoped>

  .product-list {
    position: fixed;
    width: 1886px;
    height: 300px;
    z-index: 999;
    top: 80px;
    left: -7px;
    padding: 0;
    overflow: hidden;
    background: rgb(255, 255, 255);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
    margin-left: 15px;
  }

  .product-list-item {
    position: relative;
    top: 0 !important;
    left: 245px  !important;
    
  }

  .product-list-item ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: auto;

  }

  .product-list-item ul li {
    list-style: none;
    margin-left: -500px;
  }

  .product-list-item ul:nth-child(4) img {
    height: 100px;
  }

  .product-list-item-title {
    
    margin-top: 42px;
    font-size: 15px;
    font-weight: bold;
  }

  .slide-enter-active, .slide-leave-active {
    transition: opacity 1.5s;
  }
  .slide-enter, .slide-leave-to {
    opacity: 1.5s;
    overflow: hidden;
  }

  .product-list-item a {
    text-decoration: none;
    color: black;
  }


  img {
    height: 127px;
    width: 116px;
    top: 80px;
    right: 70px;
    margin-top: 60px;
    transition: transform 0.5s;
  }

</style>